<template>
	<view class="zh-about-us">
		<view class="logo">
			<image :src="IMG_URL + '/aboutus/logo.png'"/>
		</view>
		<view class="section">
			<view class="title">
				<text>关于我们</text>
			</view>
			<view class="des">
				<text>中恒e纺定位是纺织行业 一站式交易+一门式服务。平台用科技连接纺织产业上下游，整合产业资源，以交易为核心构建了纺织全产业链智慧生态服务体系。</text>
			</view>
			<view class="imgs display-flex align-center justify-between">
				<image :src="IMG_URL + '/aboutus/1.png'"/>
				<image :src="IMG_URL + '/aboutus/2.png'"/>
				<image :src="IMG_URL + '/aboutus/3.png'"/>
				<image :src="IMG_URL + '/aboutus/4.png'"/>
				<image :src="IMG_URL + '/aboutus/5.png'"/>
			</view>
			<view class="des1">
				<text>中恒e纺平台运营主体是“中恒纺织交易市场（广东）有限公司”，公司是隶属于中国恒天集团有限公司 旗下的重要央企成员单位。</text>
			</view>
		</view>
		<view class="section_2">
			<view class="title">
				<text>联系我们</text>
			</view>
			<view class="link">
				<view class="company">
					<text>中恒纺织交易市场 (广东) 有限公司</text>
				</view>
				<view class="link-item display-flex">
					<image :src="IMG_URL + '/aboutus/link_1.png'"/>
					<text>0757 - 82138330</text>
				</view>
				<view class="link-item display-flex">
					<image :src="IMG_URL + '/aboutus/link_2.png'"/>
					<text>0757 - 82138339</text>
				</view>
				<view class="link-item display-flex">
					<image :src="IMG_URL + '/aboutus/link_3.png'"/>
					<text>service@texchange.com.cn</text>
				</view>
				<view class="link-item display-flex">
					<image :src="IMG_URL + '/aboutus/link_4.png'"/>
					<text>佛山市禅城区兴华路25号 M+ 产业小镇5栋6楼</text>
				</view>
				<view class="link-item">
					<map :latitude="latitude" :longitude="longitude" :scale="16" :markers="markers" @tap="clickMap"></map>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, reactive } from 'vue'
	import { util, system } from '@/utils'
	import iconPath from '@/static/icons/address_icon.png'
	import { IMG_URL } from '@/utils/constant'
	
	const latitude = ref(0)
	const longitude = ref(0)
	//#ifdef MP-WEIXIN || H5
	latitude.value = 23.044858
	longitude.value = 113.073567
	//#endif
	//#ifdef APP-PLUS
	latitude.value = 23.043913
	longitude.value = 113.074334
	//#endif
	const markers = reactive([{
		id:10000,
		longitude:longitude.value,
		latitude:latitude.value,
		iconPath:iconPath,
		width:32,
		height:39
	}])
	
	const clickMap = () => {
		// const params = util.setObjParams(markers)
		// navigateTo('/pages/userCenter/map?info=' + params)
		system.openLocation({
			name:'中恒纺织交易市场 (广东) 有限公司',
			address:'佛山市禅城区兴华路25号 M+ 产业小镇5栋6楼',
			latitude: markers[0].latitude,
			longitude: markers[0].longitude,
			success:() => {
				
			}
		})
	}
	
	const navigateTo = (url:string) => {
		uni.navigateTo({url:url})
	}
	
</script>

<style lang="scss" scoped>
	.zh-about-us {
		.logo {
			background-color: #fff;
			padding-top:100rpx;
			text-align:center;
			image {
				
				width:305rpx;
				height: 83rpx;
			}
		}
		.section {
			background-color: #fff;
			padding:111rpx 44rpx 30rpx;
			.title {
				font-size:38rpx;
				color:#B39B78;
				font-weight: bold;
				position:relative;
				margin-left:30rpx;
				&::before {
					content:'';
					position:absolute;
					top:9rpx;
					left:-22rpx;
					width:8rpx;
					height:36rpx;
					background-color: #B39B78;
				}
			}
			.des {
				font-size:32rpx;
				color:#787878;
				margin-top: 45rpx;
			}
			.imgs {
				margin-top:70rpx;
				image {
					width:120rpx;
					height: 120rpx;
				}
			}
			.des1 {
				margin-top:90rpx;
				font-size:32rpx;
			}
			
		}
		.section_2 {
			background-color: #fff;
			padding:111rpx 44rpx 120rpx;
			margin-top:20rpx;
			.title {
				font-size:38rpx;
				color:#B39B78;
				font-weight: bold;
				position:relative;
				margin-left:30rpx;
				&::before {
					content:'';
					position:absolute;
					top:9rpx;
					left:-22rpx;
					width:8rpx;
					height:36rpx;
					background-color: #B39B78;
				}
			}
			.link {
				font-size:32rpx;
				color:#787878;
				.company {
					margin-top:30rpx;
				}
				.link-item {
					margin-top: 28rpx;
					image {
						width:40rpx;
						height: 40rpx;
					}
					text {
						margin-left:30rpx;
					}
					map {
						width:100%;
						//height:800rpx;
					}
				}
			}
		}
	}
</style>
